<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/serve.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det" v-on:click="status_type = 1">
			<div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="position-relative">
					<div class="header-status-box">
						<div class="header-status">
							<div><a href="index.html">首页</a></div>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 2">
							<a class="flex align-center">
								<div>要闻</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 2}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 3">
							<a class="flex align-center">
								<div>解读</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 3}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 4">
							<a class="flex align-center">
								<div>科创</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 4}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 5">
							<a class="flex align-center">
								<div>科普</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 5}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 6">
							<a class="flex align-center">
								<div>科教</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 6}"
									src="images/down.png" />
							</a>
						</div>
			            <div class="header-status">
							<div class="color-main">服务</div>
							<div class="header-line"></div>
						</div>
					</div>
			
					<!-- 下拉内容 -->
					<div class="header-content-box" v-if="status_type!=1">
						<div class="container">
							<div class="row">
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box margin-top-120">
				<div class="container">
					<div class="margin-bottom-40">
						<div class="font-18 text-bold">北京科技报</div>
						<div class="row margin-top-16">
							<div class="col-xs-4 col-sm-4 margin-bottom-14">
								<a href="">
									<img class="span-img" src="images/app.png" />
									<div class="font-14 text-bold text-center margin-top-4">关于我们</div>
								</a>
							</div>
							<div class="col-xs-4 col-sm-4 margin-bottom-14">
								<a href="">
									<img class="span-img" src="images/app.png" />
									<div class="font-14 text-bold text-center margin-top-4">报纸订阅</div>
								</a>
							</div>
						</div>
					</div>
					<div class="margin-bottom-40">
						<div class="font-18 text-bold">分类标题</div>
						<div class="row margin-top-16">
							<div class="col-xs-4 col-sm-4 margin-bottom-14">
								<a href="">
									<img class="span-img" src="images/app.png" />
									<div class="font-14 text-bold text-center margin-top-4">公园预约</div>
								</a>
							</div>
							<div class="col-xs-4 col-sm-4 margin-bottom-14">
								<a href="">
									<img class="span-img" src="images/app.png" />
									<div class="font-14 text-bold text-center margin-top-4">公园预约</div>
								</a>
							</div>
							<div class="col-xs-4 col-sm-4 margin-bottom-14">
								<a href="">
									<img class="span-img" src="images/app.png" />
									<div class="font-14 text-bold text-center margin-top-4">公园预约</div>
								</a>
							</div>
							<div class="col-xs-4 col-sm-4 margin-bottom-14">
								<a href="">
									<img class="span-img" src="images/app.png" />
									<div class="font-14 text-bold text-center margin-top-4">公园预约</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			status_type: 1,
		},
		mounted: function() {
            
        },
		methods: {
			
		}
	})
</script>